<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Sortable With AJAX &amp; MYSQL</title>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.1.custom.min.js"></script>
<link rel='stylesheet' href='/js/styles.css' type='text/css' media='all' />
<script type="text/javascript">
  // When the document is ready set up our sortable with it's inherant function(s)
  $(document).ready(function() {
    $("#test-list").sortable({
      handle : '.handle',
      update : function () {
		  var order = $('#test-list').sortable('serialize');
		 
  		$("#info").load("/admin/note/reorder-process?"+order);
      }
    });
});
</script>
</head>

<body>
<pre>
<div id="info">Waiting for update</div>
</pre>

  <ul id="test-list">
  <?php $i=1; foreach($this->listorder as $orderitem){ ?>     
   <div  class="handle" id="listItem_<?php echo $orderitem['GroupNoteID'];?>" >
  <li class="handle"  ><img src="/images/thaoluan/arrow.png" style="padding-right:20px" alt="move"  width="16" height="16" class="" /><strong><?php echo $orderitem['name_group'];?></strong></li>
   </div>
      <?php $i++;} ?>
   
 </ul>


</body>
</html>